
import {  Link, NavLink, useNavigate } from 'react-router-dom';

import styles from '../App.module.css';

export default function Home(){

    
    let activeStyle = {
        textDecoration: "overline line-through underline",
        color: 'green'
    };

    let activeClassName = styles.Actived;

    // 通过 HOOK 获得 navigate 函数
    const navigate = useNavigate();

    let handler = (evt: any)=>{
        console.log( evt );
        // 编程式导航
        navigate( '/' , { replace: true } );
    }

    return (
        <div className={styles.Nav}>
            <NavLink to="/home">主页</NavLink>
            <NavLink to="/name/sanfeng" style={ p => p.isActive ? activeStyle : {} }>三丰</NavLink>
            <NavLink to="/name/wufeng" className={ p => p.isActive ? activeClassName : '' }>五丰</NavLink>
            <Link to="/name/wuchang">五常</Link>
            <Link to={ { pathname: '/name/ouyangfeng' , hash: "hello" } }>欧阳锋</Link>
            <Link to="/s?keyword=凤姐">搜索凤姐</Link>
            <Link to={ { pathname: '/s' , search: 'keyword=龙哥' } }>搜索龙哥</Link>
            <Link to={ { pathname: '/s?keyword=交个朋友' } }>交个朋友</Link>
            <Link to="/about">关于我们</Link>
            <button onClick={handler}>返回首页</button>
        </div>
    );
}